<!doctype html>
<html lang="en">
<head>

<?php include './inc/css.html'; ?>

<style type="text/css">



</style>

</head>
<body>

<?php include './inc/header.html'; ?>


<div class="wrap animated fadeIn" id="repair_add">
<div class="line1"></div>

<!-- Start 实训室 -->

<div class="profilepanel clearfix limit-width">
    

<div class="userinfo fl pc20 _bg_light">
    <?php include './inc/userinfo_simple.html'; ?>
</div>



<div class="listinfo fr pc75">
        <div class="listtitle lh4 p15 _bg_light">
                <span>发布报修</span>
                <a class="ion-android-arrow-back fr p15 _active_primary" href="javascript:history.back()"> 返回</a>
        </div>

        <div class="listcontent  _bg_light">

            <div class="row">

              <form class="form-horizontal m-t" id="infoForm" novalidate="novalidate">

                <div class="form-group">
                  <!-- <label for="nickname" class="col-xs-3 control-label _text_secondary">型号:</label> -->
                  <div class="col-xs-7">
                    <input type="input" id="equtype" name="equtype" class="form-control tran3"  placeholder="请填写设备型号">
                  </div>
                   <div class="col-xs-4">
                     <a id="showresume" href="./equ_detail.php?t=repair" class=" tc _text_secondary"> 设备履历</a>
                  </div>
                </div>    

                <div class="form-group">
                  <!-- <label for="school" class="col-xs-3 control-label _text_secondary">终端:</label> -->
                  <div class="col-xs-12">
                      <select class="form-control tran3" id="equid" name="equid" value="">
                        <option value ="">请选择终端</option>
                      <?php for($i=1;$i<11;$i++){ ?>
                        <option value ="<?php echo $i; ?>"><?php echo '终端'.$i; ?></option>
                      <?php } ?>

                      </select>

                  </div>
                </div>    



                <div class="form-group">
                  <!-- <label for="username" class="col-xs-3 control-label _text_secondary">问题:</label> -->
                  <div class="col-xs-12">
                    <textarea id="equdetail" name="equdetail" class="form-control tran3" onpropertychange="this.style.height=this.scrollHeight+'px';" oninput="this.style.height=this.scrollHeight+'px';"  placeholder="请填写设备问题描述"></textarea>
                  </div>
                </div>    

                <div id="imglist" class="form-group" >
                   <input type="file" accept="image/*" name="wx_code" id="inputImage" value=""  class="hide">

                  <div class="col-xs-4">
                    <div class="preview tc">
                      <span class="ion-ios-camera-outline"></span>
                    </div>
                  </div>

                </div>

                <div class="form-group">
                  <div class="col-xs-offset-1 col-xs-10">
                    <button id="sendrepair" class="btn btn-block _text_barely _bg_dark">提 交</button>
                  </div>         
                </div>
              </form>

            </div>
        </div>

</div>

    
</div>

</div>   

<?php include './inc/footer.html'; ?>
</body>

<?php include './inc/js.html'; ?>
<script type="text/javascript">

var imglength = 9;
var uploadimg = '<div class="col-xs-4 animated fadeIn"><div class="preview tc"><span class="ion-ios-camera-outline"></span></div></div>';
var el = $('#imglist');
var ajaxFlag = false;
var preview = {};//当前活动（被点击）图片控件


$(document).ready(function(){

var appendUpload = function(){

    if($('.preview').length>= imglength )return; //超过数量不添加图片
    if($('#imglist .col-xs-4:last-child .preview').css('background-image')=='none') return;//最后一张未上传也不添加（更新某一张图片的时候）
    el.append(uploadimg);
  }

    // $('#inputImage').on('change',function(){
    //     var formData = new FormData();
    //     formData.append("upfile", this.files[0]);
    //     var request = new XMLHttpRequest();
    //     request.open("POST", "/index.php/WebApp/Notify/uploadPic");
    //     console.log(formData);
    //     request.onload = function (e) {
    //         if (request.status == 200) {
    //             var res = JSON.parse(e.target.responseText);
    //             var url = res.url;
    //             preview.css({"background-image":"url('"+url+"')"});//前台预览
    //             preview.data('url',url);//保存到data用于后面上传
    //             appendUpload();
    //         }
    //     };
    //     request.send(formData);
    // })
    // 

    // upload
    $('#inputImage').one('click', function() {
        input = $(this).prev();
        var fileinput = this;
        var jfile = $(fileinput);
        var url = '/index.php/WebApp/Notify/uploadPic';
        var up = new FileUploader(fileinput, url);
        up.filetype = 'image/png';
        up.thumb_width = 630;
        up.onprogress = function(file, percent) {
            console.log("onprogress:"+percent+'%');
        }
        up.ononce = function(file, e) {
            var json = json_decode(e.target.response);
            if(json && json.code == 0) {
                input.val(json.message.url);
                preview.css({"background-image":"url('"+json.message.url+"')"});//前台预览
                preview.data('url',json.message.url);//保存到data用于后面上传
                appendUpload();
            } else {
                var err = json && json.message ? json.message : e.target.response;
                alert(err);
            }
        }
        up.oncomplete = function(code, files) {
            console.log("oncomplete:"+code);
            if(code == 0) {
                // $.sudo.toast('normal','上传成功','提示');
            } else {
                // $.sudo.toast('error','上传失败','提示');
            }
        }
        up.onselected = function(files) {
            console.log("onselected");
            cancel_sign = 0;
            var file = files[0];
            if(!/^image/.test(file.type) || !/(.jpg|.jpeg|.gif|.png|.bmp)$/i.test(file.type)) {
                $.sudo.toast('error','只允许上传jpg、jpeg、gif、png格式的图片','提示'); return;
            }
            up.start();
        }
        up.onerror = function(file, e) {
            var json = json_decode(e.target.response);
            var err = json && json.message ? json.message : e.target.response;
            jfile.popover(err); return;
        }
        up.onabort = function(file, e) {}
        up.init();
    });

    $('body').on('click','.preview',function(){
      preview = $(this);
      $('#inputImage').click();

    })



    $('#sendrepair').on('click',function(e){

        e.preventDefault();
        var equtype = $.trim($('input[name=equtype]').val());
        var equid = $.trim($('#equid').val());
        var equdetail = $.trim($('#equdetail').val());


        if(equtype.length==0||equid.length==0||equdetail.length==0){
            layer.msg('请填写完整设备报修信息');
            return;
        }

        var imgstr = '';
        $('#imglist .preview').each(function(i){

          var url = $(this).data('url');
          if(url!=undefined&&url.length>0){
            imgstr+=url+',';//逗号分隔
          }
        });



        var data = {
            "equtype":equtype,
            "equid":equid,
            'equdetail':equdetail,
            "equimg" : imgstr

        };


        layer.msg(JSON.stringify(data));
        return;
        $.post('postrepair.php',data ,function(result){
             layer.msg(result);
        })

               
    })


    initfooter();


})


</script>
</html>